<template>
<div>
	<div class="container">
		<div class="header">
			<img src="../../assets/image/youpin.png" alt="">
			<input type="text" placeholder="搜一搜" ref="input">
			<i class="iconfont icon-search"></i>
		</div>
		<div class="logoicon">
			<img src="./icon6.png" alt="">
		</div>
		<div class="content">
			<ul >
				<li>
					<img src="./icon1.png" alt="">
					 <p>上新精选</p>
				</li>
				<li>
					<img src="./icon2.png" alt="">
					<p>小米众筹</p>
				</li>
				<li>
					<img src="./icon3.png" alt="">
					<p>有品秒杀</p>
				</li>
				<li>
					<img src="./icon4.png" alt="">
					<p>生活优选</p>
				</li>
				<li>
					<img src="./icon5.png" alt="">
					<p>小米自营</p>
				</li>
			</ul>
		</div>
		<div class="listmain">
			<div class="list">
				<div>
					<span>上新欣赏</span>
					<router-link to="/list/+item.id">
						<span>更多
						<img src="./icon_arrow_right_darkgray.png" alt="">
						</span>
					</router-link>
				</div>
				<ul>
					<li v-for="item in list" :key="item.id">

						<router-link to="/list/+item.id">
							<div class="img">
								<img :src="item.avatar" alt="">
								<span v-text="item.name"></span>
							</div>
						</router-link>

					</li>
				</ul>
			</div>
			<div class="list">
				<div>
					<span>限时秒杀</span>
					<router-link to="/detail">
						<span>更多
						<img src="./icon_arrow_right_darkgray.png" alt="">
						</span>
					</router-link>
				</div>
				<ul>
					<li v-for="item in listSub" :key="item.id">
						<router-link to="/list/+item.id">
							<div class="img">
								<img :src="item.avatar" alt="">
								<span v-text="item.name"></span>
							</div>
						</router-link>
					</li>
				</ul>
			</div>
		</div>

		<div class="footer">
			<MiNav></MiNav>
		</div>

	</div>

</div>
</template>
<script>
	import {ProductApi} from '../../api';
        import {CategoryApi} from '../../api';
        import MiNav from'../../components/MiNav/MiNav.vue';
        export  default {
           name:"Home",
           components:{
                   MiNav},
	   data(){
                   return{
                           list:[],  //一级分类
	                   listSub:[],
	                   activeId:0,
				fid:1,
			search: {
                                name: "",
                                cid:parseInt(this.$route.params.params),
                                orderCol: "price",
                                orderDir: "asc",
                                begin: 0,
                                pageSize: 10
                           }
                   };
	   },

	 created(){
	         this.getData()
        },
	methods:{
                async getData() {
                        const result=await ProductApi.getList(this.search);
                        const result1=await  CategoryApi.getList(1);
                        this.list=result;
                        this.listSub=result1;
                        console.log(this.list)
}
	 }

   }
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
	list-style: none;
}

.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #eeeeee;
}
.header {
	flex-shrink: 0;
	height: 60px;
	display: flex;
	justify-content: space-around;
	background-color: #835f3f;
}
.header img{
	margin-top: 15px;
	height:30px;
}
.header input {
	width: 335px;
	box-sizing: border-box;
	border: 1px solid #ffffff;
	padding: 15px;
	padding-left: 30px;
	border-radius: 15px;
	height: 30px;
	align-self: center;
	font-size: 14px;
	position: relative;
}
	.header i{
		position: absolute;
		top: 22px;
		left: 80px;
	}
.content{
	height: 90px;
}
.content ul{
	display: flex;
	flex-direction: row;
	flex-shrink: 1;
	justify-content: space-around;
}
.content ul li{
	width:66px;
	height:90px;
}
.content ul li img{
	width: 66px;
	height:66px;
	margin: 0 auto;
}
.content ul li p{
	margin-left: 4px;
	margin-top: -10px;
	font-size: 13px;
}
.list{
	display: flex;
}

.logoicon img{
	height:100%;
	width: 100%;
}
.list{
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	background-color: #f7f7f7;
	margin: 10px 10px;
	border-radius: 10px;
}
.listmain{
	display: flex;
	overflow: auto;
	flex-direction: column;
}
.list ul{
display: flex;
overflow: auto;
height: 150px;
}
.listmain::-webkit-scrollbar,
.list ul::-webkit-scrollbar{
	display: none;
}
.list ul li{
	width: 100px;
	height: 100px;
}
.img{
	background-color: rgba(255, 255, 255, 0.99);
	margin-right: 3px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.img>img{
	width: 100px;
}
.img span{
	font-size: 10px;
}
.list>div{
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
}
.list>div span{
	font-size: 23px;
	font-weight:800;
}
.list>div a span{
	font-size: 14px;
	font-weight:800;
}
.list>div a img{
	width: 12px;
	margin-left: -7px;
}

</style>